<template>
  <div class="staff-container">
    <TheTableHeader
      :page="currentPageRef"
      :size="10"
      :total="staffTotalRef"
      :changeCurrentPage="changeCurrentPage"
      :openAddDialog="()=>setDialogStatus(true)"
      interfaceType="staff"
      interfaceName="deleteStaff_API"
    />

    <!-- 左侧搜索 -->
    <SearchContainer>
      <template #filter>
        <FilterForm />
      </template>
    </SearchContainer>

    <!-- 新增员工 -->
    <BaseDialog 
      title="新增员工"
      :dialogStatus=dialogStatusRef
      :setDialogStatus=setDialogStatus
      width="800px"
    >
    <CreateStaff :setDialogStatus="setDialogStatus"/>
  </BaseDialog>

    <!-- 右侧表格 -->
    <TableList :staffList="staffListRef" v-if="staffListRef" />

    <!-- 详情抽屉 -->
    <BaseDrawer>
      <StaffDetail :staffDetail="staffDetailRef"></StaffDetail>
    </BaseDrawer>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import appStore from "@/store";
import TheTableHeader from "@/components/the-table-header/index.vue";
import SearchContainer from "@/components/search-container/index.vue";
import FilterForm from "./components/FilterForm.vue";
import TableList from "./components/TableList.vue";
import BaseDialog from '@/components/base-dialog/index.vue';
import CreateStaff from './components/CreateStaff/index.vue';
import StaffDetail from './components/StaffDetail/index.vue';
// import { ref } from "@vue/reactivity";
// import { onBeforeMount, onMounted } from "vue";

const currentPageRef = ref(1);
const dialogStatusRef = ref(false);
const setDialogStatus = (bool:boolean) => {
  dialogStatusRef.value = bool;
}
const { staffListRef, staffTotalRef, staffDetailRef } = storeToRefs(appStore.useStaffStore);
onBeforeMount(() => {
  console.log("staff-onBeforeMount");
});
onMounted(async () => {
  try {
    // await appStore.useStaffStore.getStaffList();
    console.log("onMounted-staff");
    await initStaffList();
    console.log(staffListRef.value[0], "rrrrrr");
    // await appStore.useStaffStore.getStaffDetail(40);
    console.log(staffDetailRef,'li')
  } catch (error) {
    console.log(error, "onMounted-员工管理");
  }
});
console.log("staff-1111111111");


// console.log(staffListRef, "staffListRef");

async function changeCurrentPage(newPage, pageSize = 10) {
  console.log(newPage, pageSize, "params");
  currentPageRef.value = newPage;
  console.log(currentPageRef, "ref");
  await initStaffList(newPage, pageSize);
}

async function initStaffList(page = 1, size = 10, queryData = {}) {
  try {
    await appStore.useStaffStore.getStaffList(page, size, queryData);
  } catch (error) {
    console.log(error, "initStaffList-error");
  }
}
</script>

<style lang="less" scoped>
.staff-container {
  height: 100%;
  display: flex;
}
</style>
